---
title: Playwright
icon: 'vials'
description: 'A guide on how playwright is setup and used in the monorepo.'
---

[Playwright](https://playwright.dev/) is a library used to automate the browser. It is a powerful tool to test web applications and can be used to automate tasks that require a browser.

In OrbitKit, Playwright is used to provide a way to write and run end-to-end tests for the web and marketing applications.

## How it's setup

In short terms:

- The `@playwright/test` dependency is installed at the root of the monorepo to provide a way of running `playwright install-deps --with-deps` to install the necessary browser binaries without having to change directories.
- The `@playwright/test` dependency is also installed in each of the applications.
- Tests are written in an `e2e` directory in each application.
- The `playwright.config.ts` inside each of the applications is used to configure the tests.
- To run the tests, you use turborepo and the `turbo test:e2e` command. Filtering to a single application is done using the `--filter` flag followed by the application name such as `turbo test:e2e --filter=@orbitkit/web`.
- To provide more flags to playwright while running it, you can do so by adding `-- --` followed by the flags. For example, `turbo test:e2e --filter=@orbitkit/web -- --headed` will run the tests in the web application in headed mode.
- There is also a playwright specific eslint configuration in `packages/config/eslint/playwright.js` that is used to lint the tests and is added onto the eslint configuration of each app that uses playwright using `orbitkit/playwright` in the extends array.

## Writing tests

To write tests, you can create a new file in the `e2e` directory of the application you want to write the test for. The file should have a `.spec.ts` extension.

Here is an example of a test file:

```typescript
import { expect, test } from '@playwright/test'

test('has title', async ({ page }) => {
  await page.goto('/')

  await expect(page.getByText(/astro website/i)).toBeVisible()
})
```

## CI setup

In CI, the tests are run per application in a separate job. Refer to the `.github/workflows/pr-ci.yml` file to see how the tests are run in CI.
